<template>
  <div class="transQuery_main">
    <a-form>
      <a-row :gutter="16">
        <!-- <a-col :span="4">
          <a-form-item>
            <a-input placeholder="会员编号" v-model="query.data.memberNo" />
          </a-form-item>
        </a-col>
        <a-col :span="4" :offset="1" style="padding:0;">
          <a-form-item>
            <a-input placeholder="会员账号" v-model="query.data.username" />
          </a-form-item>
        </a-col>-->
        <a-col :span="4">
          <a-form-item>
            <a-input placeholder="客户名称" v-model="query.data.merchantName" />
          </a-form-item>
        </a-col>
        <a-col :span="4" :offset="1">
          <a-form-item>
            <a-select
              placeholder="审核状态"
              :options="statusSelectList"
              v-model="query.data.status"
            ></a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row style="margin-bottom: 20px;">
        <a-col :span="9" :style="{ textAlign: 'left' }">
          <a-row type="flex">
            <a-col :span="6">
              <a-button
                class="button_sty"
                type="primary"
                :loading="loading"
                @click="getAuditList"
                >查询</a-button
              >
            </a-col>
            <a-col :span="6" :offset="1">
              <a-button class="button_sty" type="primary" @click="reset"
                >重置</a-button
              >
            </a-col>
          </a-row>
        </a-col>
      </a-row>
    </a-form>

    <a-table
      size="middle"
      :columns="columns"
      :dataSource="list"
      :pagination="false"
      :rowKey="(record, index) => index"
    >
      <span slot="action" slot-scope="record">
        <div class="btnGroup">
          <!-- <span
          v-if="record.status!='in_submission'"
          @click="goDetail(record.id,record.statusName)"
          style="color:#1890ff;"
        >详细</span> -->
          <!-- <span
          v-if="record.status=='in_submission'"
          @click="goModification(record.id,record.memberNo,record.merchantType)"
          style="color:#1890ff;"
        >继续填写</span> -->
          <ControlButton
            buttonText="详细"
            buttonType="link"
            toolParams="EXPAND_SERVICE_PROVIDER"
            v-if="record.status != 'in_submission'"
            @click="goDetail(record.id, record.statusName)"
          />

          <ControlButton
           v-else
            buttonText="继续填写"
            buttonType="link"
            toolParams="EXPAND_SERVICE_PROVIDER"
            @click="
              goModification(record.id, record.memberNo, record.merchantType)
            "
          />
        </div>
      </span>
    </a-table>
    <a-pagination
      @change="onPageChange"
      :current="pagination.current"
      :total="pagination.total"
      :pageSize="query.pageSize"
      style="margin-top: 20px"
    />
    <!-- <a-modal
      style="top: 30vh;"
      @ok="handleOk"
      @cancel="handleCancel"
      :visible="modalVisible"
      :closable="false"
      :maskClosable="false"
      :footer="null"
    >
      <div class="modal_div">
        <div class="modal_title">
          <h3>您还未设置“合作机构费率模板”</h3>
        </div>
        <p style="line-height: 30px;text-align: center;">点击“确定”前往设置</p>
        <div class="footClass">
          <a-button type="primary" class="buttonClass" @click="clickhandleCancel">确&emsp;定</a-button>
        </div>
      </div>
    </a-modal> -->
  </div>
</template>

<script>
import ControlButton from "@/components/ControlButton";
import AForm from "ant-design-vue/es/form/Form";
import ATabs from "ant-design-vue/es/tabs";
import AFormItem from "ant-design-vue/es/form/FormItem";
import AInput from "ant-design-vue/es/input/Input";
import AIcon from "ant-design-vue/es/icon";
import AInputGroup from "ant-design-vue/es/input/Group";
import AButton from "ant-design-vue/es/button/button";
import ACol from "ant-design-vue/es/grid/Col";
import ARow from "ant-design-vue/es/grid/Row";
import ACheckbox from "ant-design-vue/es/checkbox/Checkbox";
import AAlert from "ant-design-vue/es/alert/index";
import moment from "moment";
import api from "@/common/api";
const ATabPane = ATabs.TabPane;

const columns = [
  {
    title: "客户名称",
    dataIndex: "merchantName",
    width: "20%",
    align: "center"
  },
  {
    title: "客户类型",
    dataIndex: "merchantTypeName",
    width: "20%",
    align: "center"
  },
  { title: "申请时间", dataIndex: "ctime", width: "20%", align: "center" },
  { title: "审核状态", dataIndex: "statusName", width: "20%", align: "center" },
  {
    title: "操作",
    scopedSlots: { customRender: "action" },
    width: "20%",
    align: "center"
  }
];

export default {
  name: "Login",
  components: {
    ControlButton,
    AAlert,
    ACheckbox,
    ACol,
    ARow,
    AButton,
    AInputGroup,
    AIcon,
    AInput,
    AFormItem,
    ATabPane,
    ATabs,
    AForm
  },

  data() {
    return {
      today: new Date(),
      columns,
      isClear: false,
      showModal: false,
      momentDate: moment(new Date()),
      excelurl: "",
      statusList: [],
      statusSelectList: [
        { label: "全部状态", value: "all" },
        { label: "提交中", value: "in_submission" },
        { label: "待审核", value: "init" },
        { label: "审核通过", value: "pass" },
        { label: "审核不通过", value: "rejected" }
      ],
      transTypeList: [],
      query: {
        data: {
          status: "all",
          merchantName: null
        },
        page: 1,
        pageSize: 10
      },
      pagination: { current: null, total: null },
      visible: false,
      form: this.$form.createForm(this),
      error: "",
      loginpwd: "",
      loginpwd2: "",
      login: false,
      list: [],
      count: null,
      payedCount: null,
      totalAmount: null,
      loading: false,
      modalVisible: false,
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 8 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 14, offset: 1 },
          md: { span: 14, offset: 1 }
        }
      }
    };
  },
  watch: {},
  filters: {
    timeFilter: function(value) {
      if (value) {
        let year = value.substring(0, 2);
        let mouth = value.substring(2, 4);
        let day = value.substring(4, 6);
        return year + ":" + mouth + ":" + day;
      }
    }
  },
  computed: {},
  created() {},
  mounted() {
    this.getAuditList();
    // this.getrateTemplatelist();
  },
  methods: {
    moment,
    onPageChange: function(page, pageSize) {
      console.info(page, pageSize);
      this.query.page = page;
      this.query.pageSize = pageSize;
      this.getAuditList();
    },
    onChange(dates, dateStrings) {
      // this.query.data.transDate = null;
      this.query.data.transDate = dateStrings;
      console.info(this.query.data.transDate);
    },
    reset() {
      // (this.query.data.memberNo = null),
      //   (this.query.data.username = null),
      (this.query.data.status = "all"), (this.query.data.merchantName = null);
    }, //重置
    getAuditList() {
      this.loading = true;
      // console.info(this.query);
      this.$axios.post("/agent/logAgent/list", this.query).then(
        res => {
          // console.log("AuditList", res);
          this.loading = false;
          if (res.data.code == "OK") {
            this.list = res.data.list;
            this.pagination.current = res.data.current;
            this.pagination.total = res.data.total;
          } else {
            this.$message.info(res.data.message);
            this.list = [];
            this.pagination.current = 1;
            this.pagination.total = 1;
            return false;
          }
        },
        err => {
          this.loading = false;
          this.$message.error(err.message);
        }
      );
    },

    goModification(id, memberno, type) {
      if (type == "small") {
        this.$router.push({
          name: "/Partners/userTypeB/step1",
          params: {
            queryid: id,
            memberNo: memberno
          }
        });
      } else {
        this.$router.push({
          name: "/Partners/userTypeA/step1",
          params: {
            queryid: id,
            memberNo: memberno
          }
        });
      }
    },
    handleSearch() {
      this.loading = true;
      console.info(this.query);
      api.coustromOrg(this.query, res => {
        console.info(res);
        if (res.code == "OK") {
          this.loading = false;
          this.list = res.list;
          this.list.forEach(function(item) {
            item.amount = item.amount.toFixed(2);
          });
          this.pagination.current = res.current;
          this.pagination.total = res.total;
          // this.count = res.total; //总笔数
          // this.payedCount = res.payedCount; //成功笔数
          // this.totalAmount = res.totalAmount.toFixed(2); //总金额
        } else {
          this.loading = false;
          // this.$message.info(res.message)
          this.list = [];
          this.pagination.current = 1;
          this.pagination.total = 1;
          return false;
        }
      });
    },
    goDetail(id, statusName) {
      this.$router.push(`/Partners/PartnersAuditQueryDetail/${id}`);
    }
  }
};
</script>

<style lang="less" scoped>
span {
  cursor: pointer;
}

span {
  cursor: pointer;
}

.formGroupTitle {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 20px;
}

.ant-tabs-nav {
  float: right;
}

.amountColor {
  color: #29a576;
  font-weight: 400;
}

.amountSize {
  font-size: 20px;
  padding: 0 5px;
}

.expand {
  display: flex;
  align-items: center;
  justify-content: center;
}

.transQuery_main {
  padding: 70px;
}

.button_sty {
  width: 100%;
}
.footClass {
  text-align: center;
}

.buttonClass {
  margin-top: 20px;
  width: 110px;
}

.modal_div {
  padding: 20px;
}

.modal_title {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border-bottom: 1px solid #ccc;
  margin-bottom: 25px;
}

.modal_title p {
  margin-bottom: 5px;
}
.btnGroup {
  display: flex;
}
</style>
